<template>
  <div class="field-content">
    <div class="bottom">
      <!-- <div v-for="item in themeList" :key="item.id" :class="['theme-element',item.selected ? 'selected': false]"> -->
      <div v-for="item in themeListHandled" :key="item.id" :class="['theme-element',item.selected ? 'selected': false]">
        <div class="left">
          <template>
            <el-input :class="[`input${item.id}`,item.edit ? 'edit': 'detail']" size="mini" v-model="item.themeName"
              placeholder="请输入主题" @blur="blurFun(item)" maxlength="20" show-word-limit ref="input">
            </el-input>
          </template>
          <template>
            <div :class="[item.edit ? 'detail': 'edit']" @click="clickThemeData(item)">{{item.themeName}}</div>
          </template>
        </div>
        <div class="right">
          <i class="el-icon-edit iconEdit" @click="editTheme(item)"></i>
          <i class="el-icon-delete iconDelete" @click="deleteTheme(item)"></i>
          <i class="el-icon-top iconTop" @click="topTheme(item)"></i>
          <i class="el-icon-bottom iconBottom" @click="bottomTheme(item)"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    deepClone
  } from "@/plugins/utils";
  export default {
    props: {
      themeList: {
        type: Array,
        default: () => {}
      },
    },
    data() {
      return {
        currentId: null, // 当前被选中主题的 id
        moveToTop: true, // 向上移动
        moveToBottom: true, // 向下移动
        themeListHandled: [],
      }
    },
    watch: {
      themeList: {
        handler: function (newVal, oldVal) {
          this.themeListHandled = deepClone(this.themeList);
          if (this.themeList.length) {
            this.themeListHandled[0].selected = true;
            // 如果当前层级主题 themeName 为空(也就是当前业务域原先没有数据)就不搜索了
            if (this.themeListHandled[0].themeName === "") return;
            this.clickThemeData(this.themeListHandled[0]);
          }
        },
        // deep: true,
        immediate: true
      },
    },
    methods: {
      editTheme(params) {
        this.currentId = params.id;
        // dom 文档中还存在 当前的 input 只是没有显示出来，而自动聚焦属性只会在页面加载时聚焦到 input 存在异步的问题
        setTimeout(() => {
          document.querySelector(`.input${this.currentId} input`).focus();
        }, 100);
        // this.themeListHandled.forEach(item => {
        this.themeListHandled.forEach(item => {
          if (item.id == params.id) {
            item.edit = true;
          }
        });
      },
      blurFun(params) {
        // 如果新增主题没有内容就不保存
        if (this.themeListHandled[this.themeListHandled.length - 1].themeName == "") {
          this.themeListHandled.pop();
          if (this.themeListHandled.length) {
            this.$eventBus.$emit("deleteEmpty", this.themeListHandled[0].level);
          } else {
            this.$eventBus.$emit("deleteEmpty")
          }
          return;
        }
        this.themeListHandled.forEach(item => {
          if (item.id == params.id) {
            item.edit = false;
          }
        });
        if (this.currentId) {
          this.$eventBus.$emit("themeUpdate", params);
        } else {
          this.$eventBus.$emit("themeAdd", params);
        }
      },
      deleteTheme(params) {
        this.$confirm('此操作将删除该主题, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$eventBus.$emit("themeDelete", params);
        }).catch(() => {
          this.$message.info("已取消删除");
        });
      },

      topTheme(params) {
        this.moveToTop = true;
        // this.themeListHandled.forEach((item, index) => {
        this.themeListHandled.forEach((item, index) => {
          if (params.id == item.id && index == 0) {
            this.moveToTop = false;
          }
        });
        if (!this.moveToTop) {
          this.$message.warning("已经到顶部了");
          return;
        }

        // this.$eventBus.$emit("themeMove", this.themeListHandled, {
        this.$eventBus.$emit("themeMove", this.themeListHandled, {
          ...params,
          flag: "top"
        });
      },

      bottomTheme(params) {
        this.moveToBottom = true;
        let len = this.themeListHandled.length - 1;
        this.themeListHandled.forEach((item, index) => {
          if (params.id == item.id && len == index) {
            this.moveToBottom = false;
          }
        });
        if (!this.moveToBottom) {
          this.$message.warning("已经到底了");
          return;
        }
        this.$eventBus.$emit("themeMove", this.themeListHandled, {
          ...params,
          flag: "bottom"
        });
      },

      clickThemeData(params) {
        // this.themeListHandled.forEach(item => {
        this.themeListHandled.forEach(item => {
          item.selected = false;
          if (item.id == params.id) {
            item.selected = true;
          }
        });
        this.$eventBus.$emit("clickThemeData", params);
      },
    },
  }
</script>

<style lang="scss" scoped>
  .field-content {
    height: 81%;
    padding: 0 16px;
    background-color: #fff;
    overflow: auto;
    // overflow-y: scroll;

    .top {
      width: 100%;
      padding-top: 16px;

      .el-button {
        width: 100%;
      }
    }

    .bottom {
      .theme-element {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
          width: 66%;
          height: 30px;
          line-height: 30px;

          .edit {
            display: block;
          }

          .detail {
            display: none;
            // visibility: hidden;
          }
        }

        .right {
          width: 34%;
          display: flex;
          align-items: center;
          justify-content: space-around;

          .iconEdit {
            color: #F18650;
            cursor: pointer;
          }

          .iconDelete {
            color: #F1838E;
            cursor: pointer;
          }

          .iconTop {
            color: #4C9AE9;
            cursor: pointer;
          }

          .iconBottom {
            cursor: pointer;
            color: #4C9AE9;
          }
        }
      }

      .theme-element.selected {
        background-color: #E7E4E4;
      }
    }
  }
</style>